<template>
	<custom-navigation-bar class="nav-bar" title="核销记录" :back="true">
		<share-element
		 class="box-wrp"
		 key="mycard"
		 transition-on-gesture
		 shuttle-on-push="from"
		>
		<text class="" >
			我的权益卡
		</text>
		</share-element>
	</custom-navigation-bar>
  <view class="container">
    <!-- 背景装饰 -->
    <view class="bg-decoration"></view>
    <view class="bg-gradient"></view>

    <!-- <top-navigation backIconColor='#FFF' bgColor="#FFF" :isFix='false' :isShow='true' :isBack="false">
      <text slot='center-slot' class="section-title">权益卡</text>
    </top-navigation> -->
    
    <view class="cards-list" v-if="false">
      <!-- 限时不限次权益卡 -->
      <view class="card-item time-limited">
        <view class="card-glow"></view>
        <view class="card-header">
          <text class="card-title">限时不限次权益卡</text>
          <text class="card-tag">热门</text>
        </view>
        
        <view class="card-body">
          <view class="price-info">
            <text class="price">¥1999</text>
            <text class="period">/30天</text>
          </view>
          
          <view class="benefits">
            <text class="benefit-item"> 有效期内不限次数使用</text>
            <text class="benefit-item"> 包含所有国内贵宾基础服务</text>
            <text class="benefit-item"> 国际贵宾通道8折优惠</text>
            <text class="benefit-item"> 专属包房9折优惠</text>
          </view>
        </view>
        
        <view class="card-footer">
          <button class="buy-btn" @click="buyCard('time-limited')">
            <text>立即购买</text>
            <text class="btn-icon">→</text>
          </button>
        </view>
      </view>
      
      <!-- 限次不限时权益卡 -->
      <view class="card-item count-limited">
        <view class="card-glow"></view>
        <view class="card-header">
          <text class="card-title">各类权益卡</text>
        </view>
        
        <view class="card-body">
          <view class="price-info">
            <text class="price">¥2999</text>
            <text class="period">/10次</text>
          </view>
          
          <view class="benefits">
            <text class="benefit-item"> 不限时间使用，共10次</text>
            <text class="benefit-item"> 包含所有国内贵宾基础服务</text>
            <text class="benefit-item"> 国际贵宾通道7折优惠</text>
            <text class="benefit-item"> 专属包房8折优惠</text>
          </view>
        </view>
        
        <view class="card-footer">
          <button class="buy-btn" @click="buyCard('count-limited')">
            <text>立即购买</text>
            <text class="btn-icon">→</text>
          </button>
        </view>
      </view>
    </view>
    
    <!-- 我的权益卡 -->
    <view class="my-cards" v-if="myCards.length > 0">
      <!-- <view class="section-title">我的权益卡</view> -->
      <view class="my-cards-list">
        <view class="my-card-item" v-for="(card, index) in myCards" :key="index" :class="card.type" >
			<image :src="cardbg" mode="" class="card-bg"></image>
				<view class="card-corner"></view>
				<view class="card-info">
				  <text class="card-name">{{ card.type === 'time-limited' ? '限时不限次权益卡' : '各类权益卡' }}</text>
				</view>
				<view class="card-detail">
				  <text class="detail-item" v-if="card.type === 'time-limited'">
				    有效期至: {{ card.expireDate }}
				  </text>
				  <text class="detail-item" v-if="card.type === 'count-limited'">
				    剩余次数: {{ card.remainingCount }}次
				  </text>
				</view>
				<view class="tap-btn" style="width: 300rpx;margin: 0 auto;">
					<tap-btn text='出示二维码'  @click="showQrcode = true; currentQrcodeId = card.id" :disabled="card.status !== 'active'"></tap-btn>
				</view>
				
				<!-- 二维码展示区域 -->
				<view class="qrcode-container" v-if="showQrcode && currentQrcodeId === card.id">
				  <view class="qrcode-mask" @click="hideQrcode"></view>
				  <view class="qrcode-popup">
				    <view class="qrcode-header">
				      <text class="qrcode-title">权益卡核销码</text>
				      <text class="qrcode-close" @click="hideQrcode">×</text>
				    </view>
				    
				    <view class="qrcode-content">
				      <image 
				        :src="card.qrcodeUrl || '/static/images/qrcode-placeholder.png'" 
				        mode="widthFix" 
				        class="qrcode-image"
				        alt="权益卡二维码"
				      ></image>
				      <text class="qrcode-desc">请出示此码进行核销</text>
				      <text class="card-number">卡号: {{ generateCardNumber(card.id) }}</text>
				    </view>
				    
				    <view class="qrcode-footer">
				      <text class="expire-info" v-if="card.type === 'time-limited'">
				        有效期至: {{ card.expireDate }}
				      </text>
				      <text class="expire-info" v-if="card.type === 'count-limited'">
				        剩余次数: {{ card.remainingCount }}次
				      </text>
				    </view>
				  </view>
				</view>
         
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showQrcode: false,
      currentQrcodeId: null,
      myCards: [
        {
          id: 1,
          type: 'time-limited',
          status: 'active',
          expireDate: '2023-12-31'
        },
        {
          id: 2,
          type: 'count-limited',
          status: 'active',
          remainingCount: 5
        }
      ],
	  cardbg:'../../static/images/qyk.jpg',
    }
  },
  methods: {
    hideQrcode() {
      this.showQrcode = false;
      this.currentQrcodeId = null;
    },
    calculateExpireDate(days) {
      const date = new Date();
      date.setDate(date.getDate() + days);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },
    generateCardNumber(id) {
      const prefix = 'VIP';
      const num = id.toString().slice(-8).padStart(8, '0');
      return `${prefix}${num}`;
    },
    navBack() {
      uni.navigateBack();
    },
    buyCard(type) {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.navigateTo({ url: '/pages/login/index' });
        return;
      }
      
      const cardName = type === 'time-limited' ? '限时不限次权益卡' : '限次不限时权益卡';
      uni.showModal({
        title: '购买确认',
        content: `您确定要购买${cardName}吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '支付中...' });
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({ title: '购买成功' });
              
              const newCard = {
                id: Date.now(),
                type,
                status: 'active',
                expireDate: type === 'time-limited' ? this.calculateExpireDate(30) : null,
                remainingCount: type === 'count-limited' ? 10 : null
              };
              this.myCards.unshift(newCard);
            }, 1500);
          }
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #f8f9fd;
  // min-height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

// 背景装饰效果
.bg-decoration {
  position: absolute;
  top: -200rpx;
  right: -200rpx;
  width: 600rpx;
  height: 600rpx;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: 0;
}

.bg-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  background: linear-gradient(180deg, rgba(248, 249, 253, 0) 0%, rgba(99, 102, 241, 0.05) 100%);
  z-index: 0;
}

.center-slot {
  color: #1d2129;
  font-size: 36rpx;
  font-weight: 600;
}

.cards-list {
  padding: 30rpx;
  position: relative;
  z-index: 1;
  margin-top: 20rpx;
}

.card-item {
  position: relative;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 40rpx;
  padding: 40rpx;
  background-color: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.card-item:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.08);
}

.time-limited {
  // border-top: 6rpx solid #6366f1;
}

.count-limited {
  // border-top: 6rpx solid #8b5cf6;
}

.card-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  filter: blur(100rpx);
  opacity: 0.2;
}

.time-limited .card-glow {
  background: #6366f1;
}

.count-limited .card-glow {
  background: #8b5cf6;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f2f3f5;
}

.card-title {
  font-size: 50rpx;
  font-weight: 600;
  color: #ffffff;
}

.card-tag {
  margin-left: 20rpx;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 22rpx;
  padding: 5rpx 18rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(99, 102, 241, 0.2);
}

.price-info {
  margin-bottom: 30rpx;
  display: flex;
  align-items: flex-end;
}

.price {
  font-size: 46rpx;
  font-weight: 700;
  color: #6366f1;
  letter-spacing: 1rpx;
}

.period {
  font-size: 28rpx;
  color: #86909c;
  margin-left: 15rpx;
  margin-bottom: 5rpx;
}

.benefits {
  padding-left: 10rpx;
}

.benefit-item {
  display: block;
  font-size: 28rpx;
  color: #4e5969;
  margin-bottom: 20rpx;
  line-height: 1.6;
  position: relative;
  padding-left: 30rpx;
}

.benefit-item::before {
  content: '•';
  position: absolute;
  left: 5rpx;
  font-weight: bold;
}

.time-limited .benefit-item::before {
  color: #6366f1;
}

.count-limited .benefit-item::before {
  color: #8b5cf6;
}

.card-footer {
  margin-top: 40rpx;
}

.buy-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 30rpx;
  font-weight: 500;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.buy-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.buy-btn:active::after {
  left: 100%;
}

.time-limited .buy-btn {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  box-shadow: 0 6rpx 16rpx rgba(99, 102, 241, 0.3);
}

.count-limited .buy-btn {
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  box-shadow: 0 6rpx 16rpx rgba(139, 92, 246, 0.3);
}

.btn-icon {
  font-size: 24rpx;
  transition: transform 0.3s ease;
}

.buy-btn:active .btn-icon {
  transform: translateX(5rpx);
}

.my-cards {
  margin-top: 30rpx;
  padding: 0 30rpx 30rpx;
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1d2129;
  display: flex;
  align-items: center;
}

// .section-title::before {
//   content: '';
//   width: 8rpx;
//   height: 28rpx;
//   background: linear-gradient(180deg, #6366f1, #8b5cf6);
//   border-radius: 4rpx;
//   margin-right: 15rpx;
// }

.my-cards-list {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.my-card-item {
	height: 400rpx;
  background: #ffffff;
  border-radius: 20rpx;
  // padding: 30rpx;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.03);
}
.card-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.my-card-item:hover {
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
}

.time-limited.my-card-item {
  // border-left: 6rpx solid #6366f1;
}

.count-limited.my-card-item {
  // border-left: 6rpx solid #8b5cf6;
}

.card-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 2;
}

.time-limited .card-corner {
  border-width: 0 100rpx 100rpx 0;
  border-color: transparent rgba(99, 102, 241, 0.05) transparent transparent;
}

.count-limited .card-corner {
  border-width: 0 100rpx 100rpx 0;
  border-color: transparent rgba(139, 92, 246, 0.05) transparent transparent;
}

.card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 2;
}

.card-name {
	margin: 50rpx 0 82rpx 40rpx;
  font-size: 50rpx;
  font-weight: 500;
  color: #ffffff;
  position: relative;
  z-index: 2;
}



.card-detail {
  margin-bottom: 40rpx;
  position: relative;
  z-index: 2;
}
.tap-btn{
	position: relative;
	  z-index: 2;
}

.detail-item {
	margin-left: 200rpx;
  font-size: 26rpx;
  color: #86909c;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.use-btn {
	width: 300rpx;
  height: 76rpx;
  line-height: 76rpx;
  border-radius: 38rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
  border: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  position: relative;
  z-index: 2;
}

.use-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.use-btn:disabled {
  background: #f2f3f5;
  color: #86909c;
  cursor: not-allowed;
}

.use-btn:active .btn-icon {
  transform: translateY(3rpx);
}

.qrcode-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.qrcode-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.qrcode-popup {
  position: relative;
  width: 640rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 15rpx 50rpx rgba(0, 0, 0, 0.3);
  animation: popUp 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.qrcode-header {
  padding: 35rpx;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qrcode-title {
  font-size: 34rpx;
  font-weight: 600;
}

.qrcode-close {
  font-size: 44rpx;
  line-height: 1;
  transition: transform 0.2s ease;
}

.qrcode-close:active {
  transform: rotate(90deg);
}

.qrcode-content {
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-image {
  width: 340rpx;
  height: 340rpx;
  margin-bottom: 30rpx;
  background-color: #f5f5f5;
  padding: 15rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
}

.qrcode-desc {
  font-size: 30rpx;
  color: #1d2129;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.card-number {
  font-size: 26rpx;
  color: #86909c;
  letter-spacing: 2rpx;
}

.qrcode-footer {
  padding: 25rpx 30rpx;
  background-color: #f7f8fa;
  text-align: center;
  border-top: 1rpx solid #f2f3f5;
}

.expire-info {
  font-size: 28rpx;
  color: #86909c;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popUp {
  from { transform: translateY(50rpx); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
</style>
